<div class="competitor-list-page">
    <!-- 页面标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>🔍 竞品管理</h2>
        <div>
            <button class="btn btn-success" onclick="competitorList.showImportDialog()">
                📥 批量导入
            </button>
            <button class="btn btn-primary" onclick="competitorList.showAddDialog()">
                ➕ 添加竞品
            </button>
        </div>
    </div>

    <!-- 搜索区域 -->
    <div class="card mb-3">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <input type="text" class="form-control" id="searchKeyword" placeholder="搜索产品名称或品牌">
                </div>
                <div class="col-md-2">
                    <select class="form-select" id="searchCategory">
                        <option value="">全部类别</option>
                        <option value="手机">手机</option>
                        <option value="笔记本电脑">笔记本电脑</option>
                        <option value="平板电脑">平板电脑</option>
                        <option value="智能手表">智能手表</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <select class="form-select" id="searchOurProductId">
                        <option value="">按我方产品筛选</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <select class="form-select" id="searchStatus">
                        <option value="">全部状态</option>
                        <option value="1">启用</option>
                        <option value="0">禁用</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <button class="btn btn-primary" onclick="competitorList.search()">🔍 搜索</button>
                    <button class="btn btn-secondary" onclick="competitorList.reset()">🔄 重置</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 数据表格 -->
    <div class="card">
        <div class="card-body">
            <table id="competitorTable" class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th width="60">ID</th>
                        <th>产品名称</th>
                        <th width="100">品牌</th>
                        <th width="100">类别</th>
                        <th width="120">价格区间</th>
                        <th width="100">竞品级别</th>
                        <th width="100">关注度</th>
                        <th width="150">竞争我方产品</th>
                        <th width="80">状态</th>
                        <th width="150">创建时间</th>
                        <th width="200">操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<!-- 添加/编辑竞品对话框（复用产品表单，但固定isOurProduct=0） -->
<div class="modal fade" id="competitorFormModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加竞品</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="competitorForm">
                    <input type="hidden" id="competitorId">
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">产品名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="competitorName" required>
                        </div>
                        
                        <div class="col-md-3 mb-3">
                            <label class="form-label">品牌</label>
                            <input type="text" class="form-control" id="competitorBrand">
                        </div>
                        
                        <div class="col-md-3 mb-3">
                            <label class="form-label">型号</label>
                            <input type="text" class="form-control" id="competitorModel">
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">产品类别</label>
                            <select class="form-select" id="competitorCategory">
                                <option value="">请选择</option>
                                <option value="手机">手机</option>
                                <option value="笔记本电脑">笔记本电脑</option>
                                <option value="平板电脑">平板电脑</option>
                                <option value="智能手表">智能手表</option>
                            </select>
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <label class="form-label">价格区间</label>
                            <input type="text" class="form-control" id="competitorPriceRange" placeholder="如：5000-6000">
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <label class="form-label">竞品级别</label>
                            <select class="form-select" id="competitorLevel">
                                <option value="direct">直接竞品</option>
                                <option value="indirect">间接竞品</option>
                                <option value="potential">潜在竞品</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">关注度</label>
                            <select class="form-select" id="competitorFocusLevel">
                                <option value="high">重点关注</option>
                                <option value="normal">一般关注</option>
                                <option value="low">低关注</option>
                            </select>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">产品状态</label>
                            <select class="form-select" id="competitorProductStatus">
                                <option value="on_sale">在售</option>
                                <option value="discontinued">停售</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">关键词</label>
                        <input type="text" class="form-control" id="competitorKeywords" placeholder="多个关键词用逗号分隔">
                        <small class="text-muted">用于AI回答中识别产品</small>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">产品描述</label>
                        <textarea class="form-control" id="competitorDescription" rows="3"></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">状态</label>
                        <select class="form-select" id="competitorStatus">
                            <option value="1">启用</option>
                            <option value="0">禁用</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="competitorList.save()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 查看竞争我方产品对话框 -->
<div class="modal fade" id="ourProductsModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">竞争的我方产品</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <h6>竞品：<span id="competitorProductName" class="text-primary"></span></h6>
                </div>
                <div id="ourProductsListBody">
                    <!-- 动态加载 -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 加载竞品列表JS -->
<script src="/assets/js/pages/competitor-list.js?v=20251011-4"></script>

